<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2> <!--在模板中解析RefImpl数据时，不用加.value，vue会自动调用.value-->
  <h2>年龄：{{age}}</h2>
  <h2>工作信息</h2>
  <h3>工作种类：{{job.type}}</h3>
  <h3>工作薪水：{{job.salary}}</h3>
  <h3>爱好：{{hobby}}</h3>
  <h3>测试的数据：{{job.a.b.c}}</h3>
  <button @click="changeInfo">修改人的信息</button>
  <hr>
  
  <Demo/>
</template>

<script>
import Demo from './components/Demo.vue'
import {ref, reactive} from 'vue' //引入vue3的ref函数，注意区别于vue2中的ref属性

export default {
  name: 'App',
  components: {
    Demo
  },
  setup() {

    //基本类型 ref可以定义基本类型和对象类型的响应式数据
    let name = ref('张三')
    let age = ref(18)

    //错误写法
    //let a = reactive(666)

    //对象类型 reactive只能定义对象类型的响应式数据，job的类型是Proxy
    let job = reactive({
      type: '前端工程师',
      salary: '30k',
      a: {
        b: {
          c: 666,
        }
      }
    })

    //数组类型
    let hobby = reactive(['抽烟', '喝酒', '烫头'])

    //虽然reactive不能处理基本类型，但是我们可以将基本类型封装到对象中，可以实现响应式
    // let person = reactive({
    //   name: '王五'
    //   age: 19,
    //   job: ['程序员'],
    //   hobby: ['学习'],
    // })

    function changeInfo() {
      console.log('修改数据前', name, age, job)

      name.value = '李四'
      age.value = 48
      //使用reactive定义对象数据，本身就是Proxy类型，获取时不需要再.value
      job.type = '后端工程师'
      job.salary = '40k'
      job.a.b.c = 999
      //vue3由于使用Proxy，不再用setget实现数据劫持，因此支持通过索引修改数组数据实现响应式
      hobby[2] = '学习'
      console.log('修改数据后', name, age, job)
    }

    return {
      name,
      age,
      changeInfo,
      job,
      hobby,
    }
  }
}
</script>

<style>
</style>
